<template>
    <div class="city">
        <CityHeader />
        <CityList :cities="cities" :hotCities="hotCities"/>
   </div>
</template>
<script>
import CityHeader from "./pages/Header.vue"
import CityList from "./pages/List.vue"
export default {
    components:{
        CityHeader,
        CityList,
    },
    data() {
        return {
            hotCities:[],
            cities:[]
        }
    },
    mounted() {
        this.$http.get('/api/dataCity.json').then(
            result=>{
                const data = result.data
                this.cities = data.cities
                this.hotCities = data.hotCities
            }
        )
    },
}
</script>
<style scoped>
.city{
    background-color: #dadada;
}
</style>